<template>
  <div id="all">
    <!--主页面-->
    <div v-if="isMain">
        <el-card>
            <!--模糊查询-->
    <div class="search">
			<el-row gutter="20">
				<el-col :span="6">
					<el-input
                            v-model="query.userName"
							size="medium"
							placeholder="请输入用户名">
					</el-input>
				</el-col>
				
				<el-col :span="6">
					<el-input
                            v-model="query.userTel"
							size="medium"
							placeholder="请输入用户手机号">
					</el-input>
				</el-col>
				
				<el-col :span="2">
					<el-button type="primary" size="medium" @click="loadUser">查询</el-button>
				</el-col>
				
				<el-col :span="5">
					<el-button type="info" size="medium" @click="reset">重置</el-button>
				</el-col>
			</el-row>
            <el-row>
                <el-col :span="2" style="margin-top:20px">
					<el-button type="success" size="medium" @click="exportExcel">导出用户数据</el-button>
			</el-col>
            </el-row>
		</div>
        <!--表格-->
        <el-table
				:data="userTableData"
				stripe
				style="width: 100%;margin-top:10px">
			<el-table-column
					prop="userName"
					label="用户名称">
			</el-table-column>
			<el-table-column label="头像" show-overflow-tooltip>
          		<template slot-scope="scope">
            	<el-link @click="down(scope.row.userAvatar)" target="_blank">
            		<img :src="scope.row.userAvatar" style="width: 60px; height: 60px" />
            	</el-link>
          </template>
        </el-table-column>
			<el-table-column
					prop="userTel"
					label="手机号码">
			</el-table-column>
			<el-table-column
					prop="accCarsBound"
					label="绑定车辆数">
			</el-table-column>
            <el-table-column
					prop="accOrderCount"
					label="订单数量">
			</el-table-column>
			<el-table-column
					prop="userIsWechat"
					label="微信绑定"
					width="100">
                    <template slot-scope="scope">
        				<span v-if="scope.row.userIsWechat=='0'">绑定</span>
        				<span v-if="scope.row.userIsWechat=='1'">未绑定</span>
       				</template>
			</el-table-column>
			<el-table-column
					prop="userStatus"
					label="状态"
					width="50">
					<template slot-scope="scope">
        				<span v-if="scope.row.userStatus=='0'">正常</span>
        				<span v-if="scope.row.userStatus=='1'">异常</span>
       				</template>
			</el-table-column>
			<el-table-column
					prop="userCreatedTime"
					label="注册时间"
					width="240">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="mini" type="#409EFF" @click="handleDetil(scope.row.userId)">详情</el-button>
					<el-button size="mini" type="#409EFF" @click="disableUser(scope.row.userId)">禁用</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="query.currentPage"
				:page-sizes="pageInfo.pageSizes"
				:page-size="query.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.total"
		>
		</el-pagination>
  </el-card>
    </div>

    <!--详情页面-->
    <div v-if="!isMain">
        <!--用户详情-->
        <el-row gutter="24">
        	<el-col :span="2">
           		<el-button type="info" size="medium" @click="goBack">返回</el-button>
        	</el-col>
     	 </el-row>
		 <!---巡检员详情页面-->
		<el-descriptions class="margin-top" title="基础信息" :column="3" :size="size" border>
        <el-descriptions-item label="用户图像">
			<img :src="userData.userAvatar" style="width:30px"/>
   		</el-descriptions-item>
        <el-descriptions-item label="用户名称">
			{{userData.userName}}
   		</el-descriptions-item>
    	<el-descriptions-item label="手机号">
			{{userData.userTel}}
    	</el-descriptions-item>
    	<el-descriptions-item label="用户ID">
			{{userData.userId}}
    	</el-descriptions-item>
    	<el-descriptions-item label="用户状态">
			{{userData.userStatus}}
    	</el-descriptions-item>
		<el-descriptions-item label="注册时间">
			{{userData.userCreatedTime}}
    	</el-descriptions-item>
        <el-descriptions-item label="最近登录时间">
			{{userData.userLoginTime}}
    	</el-descriptions-item>
  	</el-descriptions>


	  <el-descriptions class="margin-top" title="基础信息" :column="3" :size="size" border>
        <el-descriptions-item label="订单数量">
			{{userData1.accCarsBound}}
   		</el-descriptions-item>
    	<el-descriptions-item label="车辆绑定数">
			{{userData1.accOrderCount}}
    	</el-descriptions-item>
    	<el-descriptions-item label="消费金额">
			{{userData1.accSpend}}
    	</el-descriptions-item>
    	<el-descriptions-item label="代缴费金额">
			{{userData1.accUnpaid}}
    	</el-descriptions-item>
  	</el-descriptions>

    <!--车辆情况-->
    <div style="margin-top:100px">
			<el-title><h1>车辆情况</h1></el-title>
		<el-table
				:data="this.userData2"
				stripe
				style="width: 100%">
			<el-table-column
					prop="carLicensePlate"
					label="车辆号码">
			</el-table-column>
			<el-table-column
					prop="clLicenseType"
					label="车牌类型">
                    <template slot-scope="scope">
        				<span v-if="scope.row.clLicenseType=='0'">蓝</span>
        				<span v-if="scope.row.clLicenseType=='1'">黄</span>
                        <span v-if="scope.row.clLicenseType=='2'">黑</span>
        				<span v-if="scope.row.clLicenseType=='3'">绿</span>
        				<span v-if="scope.row.clLicenseType=='4'">白</span>
       				</template>
			</el-table-column>
			<el-table-column
					prop="accOrderCount"
					label="订单数量">
			</el-table-column>
            <el-table-column
					prop="accSpend"
					label="消费金额">
			</el-table-column>
			<el-table-column
					prop="accUnpaid"
					label="代缴费金额"
					width="240">
			</el-table-column>
            <el-table-column
					prop="carBindTime"
					label="绑定时间"
					width="240">
			</el-table-column>
		</el-table>
		</div>

    <!--订单记录-->
    <div style="margin-top:100px">
			<el-title><h1>订单记录</h1></el-title>
		<el-table
				:data="this.userData3"
				stripe
				style="width: 100%">
			<el-table-column
					prop="oiNo"
					label="订单编号">
			</el-table-column>
			<el-table-column
					prop="payingTime"
					label="提交时间">
			</el-table-column>
            <el-table-column
					prop="carLicensePlate"
					label="车辆号码">
			</el-table-column>
			<el-table-column
					prop="oiAmount"
					label="订单金额">
			</el-table-column>
            <el-table-column
					prop="orderStatus"
					label="订单状态">
			</el-table-column>
			<el-table-column
					prop="ptType"
					label="支付方式"
					width="240">
			</el-table-column>
		</el-table>
		</div>
    </div>
  </div>
</template>

<script>
export default {
    name:"user",
  data() {
    return {
		userData1:{},
        userTableData:{},
        isMain:true,
        query:{
            userName:"",
            userTel:"",
            currentPage:1,
            pageSize:5
        },
        pageInfo:{
            pageSizes:[5,10,15,20],
            total:0,
        }
    };
  },
  methods: {
    //查询所有用户信息
    loadUser(){
        this.$axios.post("admin/user/getAllUser", this.query).then((res) => {
					this.userTableData = res.data.data.list;
					this.pageInfo.total = res.data.data.total;
				});
    },
	//重置
	reset(){
		this.query.userName = "";
		this.query.userTel = "";
		this.loadUser();
	},
    handleDetil(id){
        this.isMain = !this.isMain;
        this.$axios.get("admin/user/baseMes/"+id).then((res) => {
            this.userData = res.data.data[0];
			this.userData1 = res.data.data[1];
			this.userData2 = res.data.data[2];
			this.userData3 = res.data.data[3];
            // this.userDetailData = this.userData[getArrayIndex(this.userData,id)] 
        })
    },
    goBack(){
        this.isMain = !this.isMain;
   	 },
	exportExcel(){
		window.location.href="http://localhost:9000/admin/user/excel";
	},
	disableUser(id){
		this.$axios.put("admin/user/update/"+id).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("修改成功");
					this.loadUser();
				} else {
					this.$message.error("该用户已经是禁用状态");
					}
				})
		},
  	},
  	mounted(){
    	this.loadUser();
 	 }
	};
function getArrayIndex(arr, obj) {
  var i = arr.length;
  while (i--) {
    if (arr[i].userId === obj) {
      return i;
    }
  }
  return -1;
}
</script>